<template>
  <el-container class="home-container">
    <!-- 菜单栏 -->
    <el-aside :width="isCollapseComputed ? '64px' : '200px'" :style="'background-color:' + drawerMainColor">
      <div class="baseTit" v-if="drawerLogoVisible" :style="'background-color:' + (isCollapseComputed ? '#fff' : 'inherit')">
        <span v-if="!isCollapseComputed">{{this.$homeTitle}}</span>
        <!-- 首页logo -->
        <span v-if="isCollapseComputed"><img src="../../assets/ltech_log.png" style="width: 52px; height: auto;" /></span>
      </div>
      <aside-components></aside-components>
    </el-aside>
    <el-container>
      <el-header>
        <header-components></header-components>
      </el-header>
      <el-row v-if="drawerTabsVisible">
        <el-col :span="24">
          <tabs-components></tabs-components><!-- 标签页组件 -->
        </el-col>
      </el-row>
      <el-main>
        <!-- 路由站位符 -->
        <transition name="slide-fade">
          <!-- 使用keep-alive 设置需要保留状态的页面避免重新渲染 -->
          <keep-alive :include="cachedViews" :max="10">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </el-main>
      <p class="company">安徽励图信息科技股份有限公司 © 版权所有 服务热线：0551-65322628 support@ltech.cc www.ltech.com.cn</p>
    </el-container>
  </el-container>
</template>

<script>
import AsideComponents from '@/components/AsideComponents' // 左侧菜单组件
import TabsComponents from '@/components/TabsComponents'
import HeaderComponents from '@/components/HeaderComponents' // 头部组件
export default {
  components: {
    AsideComponents,
    HeaderComponents,
    TabsComponents
  },
  computed: {
    drawerLogoVisible() {
      return this.$store.state.drawer.drawerLogoVisible
    },
    drawerTabsVisible() {
      return this.$store.state.drawer.drawerTabsVisible
    },
    drawerMainColor() {
      return this.$store.state.drawer.drawerMainColor
    },
    clickMenuStateComputed() {
      return this.$store.state.aside.clickMenuState
    },
    isCollapseComputed() {
      return this.$store.state.aside.isCollapseState
    }
  },
  data() {
    return {
      // 左侧菜单数据
      isCollapse: false,
      activePath: '',
      cachedViews: ['roles', 'rights', 'Pgmlib', 'editroomlist', 'advpgmlist', 'grouplib', 'advlib', 'Pgmlib'] // 使用keep-alive 的includes属性缓存需要保持状态的页面
    }
  },
  created() {
    this.activePath = this.$router.history.current.path
  },
  methods: {}
}
</script>

<style lang="less" scoped>
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .7s ease;
  }
  .slide-fade-leave-active {
    transition: all .0s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }

  .home-container {
    height: 100%;
  }
  .el-header {
    height: 52px !important;
    padding: 0;
  }

  .el-aside {
    background-color: #333744;
    transition: width .4s;
    .el-menu {
      border-right: 0;
    }
    .baseTit{
      display: flex;
      justify-content: center;
      padding:13px 0 13px 0;
      color: #fff;
      font-size: 20px;
      span{ white-space: nowrap; text-overflow: ellipsis; }
    }
  }

  .el-main {
    padding: 15px 20px 0 10px;
    background-color: #eaedf1;
  }
  .el-container {
    .company {
      font-size: 13px;
      margin: 4px auto;
      color: #303133;
      width: 100%;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background-color: rgba(169, 169, 169, 0.3);
      margin: 0;
      padding: 0;
      letter-spacing: 0.85px;
      font-weight: 450;
    }
  }
  .avatar {
    margin-right: 20px;
  }
</style>
